<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="com.film.domain.*,com.film.service.*,com.film.service.impl.*,java.util.*" errorPage="500.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>个人信息</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/userinfor.css">
		<!-- 小图标 -->
  		<link rel="icon" href="css/favicon.ico" type="image/x-icon" />
		<script src="js/jquery-1.12.4.js"></script>
	</head>
<body>
<% 
		UserService userService= new UserServiceImpl();
		User user = (User)session.getAttribute("userLogin");

		User users = userService.selectAll(user.getuId());
		request.setAttribute("users", users);
%>
	<!-- 头部 -->
	<div class="header">
    	<div class="header-inner">
	      	<h1>
	        	<a href="index.html" class="logo">太平洋影城</a>
	      	</h1>
      		<div class="nav">
	        	<ul class="navbar">
		          	<li>
		            	<a href="index">首页</a>
		          	</li>
	          		<li>
	            		<a href="hotFilm.do">电影</a>
	          		</li>
	          		<li>
	            		<a href="#">影院</a>
	          		</li>
	          		<li>
	            		<a href="#">演出</a>
	          		</li>
		          	<li>
		            	<a href="billboard.do">榜单</a>
		          	</li>
	          		<li>
	            		<a href="#">热点</a>
	          		</li>
	          		<li>
	            		<a href="#">商城</a>
	          		</li>
	        	</ul>
      		</div>
      		<div class="user-info">
        		<div class="user-avatar J-login">
	          		<c:choose>
	       				<c:when test="${sessionScope.userLogin !=null}">
	         				<img src="${sessionScope.userLogin.uImg}">
	       				</c:when>
	       				<c:otherwise>
	         				<img src="img/top_img/default_head.png">
	       				</c:otherwise>
	     			</c:choose>
	     			<span class="caret"></span>
	     			<c:choose>
	       				<c:when test="${sessionScope.userLogin != null}">
	         				<ul class="user-menu yes-login-menu">
					           	<li class="text">
					             	<a href="order.do?uid=${sessionScope.userLogin.uId}">我的订单</a>
					           	</li>
					           	<li class="text login-name" >
					             	<a href="userEssential.do?uId=${sessionScope.userLogin.uId}">基本信息</a>
					           	</li>
					           	<li class="text">
					             	<a href="exit.do" class="J-logout">退出登录</a>
					           	</li>
	         				</ul>
	       				</c:when>
				       	<c:otherwise>
				         	<ul class="user-menu no-login-menu">
					           	<li>
					           		<a href="login.jsp">登录</a>
					           	</li>
				         	</ul>
				       	</c:otherwise>
	     			</c:choose>
      			</div>
    		</div>
		    <form action="searchFilm.do" method="post" class="search-form">
		      	<input name="kw" class="search" type="search" maxlength="32" placeholder="找影视剧、影人、影院">
		      	<input class="submit" type="submit" value="">
		    </form>
    		<div class="app-download">
		      	<a href="#">
		        	<span class="iphone-icon"></span>
		        	<span class="apptext">APP下载</span>
		        	<span class="caret"></span>
		        	<div class="download-icon">
		          		<p class="down-title">扫码下载APP</p>
		          		<p class="down-content">选座更优惠</p>
		        	</div>
		      	</a>
    		</div>
  		</div>
	</div>
	<div class="header-placeholder"></div>
	<div class="container" id="app">
<div class="content">
  <div class="main">
    <div class="info-content clearfix">
      <div class="user-profile-nav">
        <h1>个人中心</h1>
        <a href="order.do?uid=${sessionScope.userLogin.uId}" class="orders ">我的订单</a>
        <a href="#" class="profile active">基本信息</a>
      </div>

<div class="profile-container">
        <div class="profile-title">
          基本信息
        </div>
        <form action="updateHeadImg.do"  method="post" enctype="multipart/form-data">
        <input type="hidden" name="uId" value="${sessionScope.userLogin.uId}">
	        <div class="avatar-container">
	          <div class="avatar-content">
	            <img class="J-setted-avatar" src="${sessionScope.userLogin.uImg}">
	            <div class="J-upload-avatar-w upload-avatar-image">
	              <input type="button" class="J-upload-avatar upload-btn" value="选择头像">
	              <input type="file" id="fileUpload" name="file">
	
	            </div>
	            <div class="tips">支持JPG,JPEG,PNG格式,且文件需小于1M</div>
	          </div>
	        </div>
	          <input type="submit" class="J-upload-avatar upload-btn" value="确认更换">
        </form>
        <form id="J-userexinfo-form" class="userexinfo-form" action="userinfor.do" method="get">
          <div class="userexinfo-form-section">
            <p>昵称：</p>
            <span>
              <input type="text" name="nickName" id="userexinfo-form-nickname" class="ui-checkbox" placeholder="2-15个字，支持中英文、数字" value="${users.uNickName}">
            </span>
          </div>
          <div class="userexinfo-form-section">
            <p>性别：</p>
            <span>
       		  <c:if test="${users.uSex=='男'}">
            	<input type="radio" name="gender" id="userexinfo-form-gender-1" value="男" class="ui-radio radio-first" Checked>
              <label for="userexinfo-form-gender-1">男</label>
            </c:if>
             <c:if test="${users.uSex!='男'}">
            	<input type="radio" name="gender" id="userexinfo-form-gender-1" value="男" class="ui-radio radio-first">
              <label for="userexinfo-form-gender-1">男</label>
            </c:if>
            </span>
            <span>
              <c:if test="${users.uSex=='女'}">
            	<input type="radio" name="gender" id="userexinfo-form-gender-2" value="女" class="ui-radio" Checked>
              <label for="userexinfo-form-gender-2">女</label>
           	  </c:if>
              <c:if test="${users.uSex!='女'}">
            	<input type="radio" name="gender" id="userexinfo-form-gender-2" value="女" class="ui-radio">
              <label for="userexinfo-form-gender-2">女</label>
           	  </c:if>
            </span>
          </div>
          <div class="date-picker userexinfo-form-section">
  <p>生日：</p>
  <span>
  	<% String[] arr = (users.getuBirthday()).split("-");
  		request.setAttribute("arr", arr);
  	%>
    <div class="ui-select">
      <select name="year" class="ui-select">
        <option>${arr[0]}</option>
        <option value="2021">2021</option>
        <option value="2020">2020</option>
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
        <option value="2015">2015</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
        <option value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
        <option value="1999">1999</option>
        <option value="1998">1998</option>
        <option value="1997">1997</option>
        <option value="1996">1996</option>
        <option value="1995">1995</option>
        <option value="1994">1994</option>
        <option value="1993">1993</option>
        <option value="1992">1992</option>
        <option value="1991">1991</option>
        <option value="1990">1990</option>
        <option value="1989">1989</option>
        <option value="1988">1988</option>
        <option value="1987">1987</option>
        <option value="1986">1986</option>
        <option value="1985">1985</option>
        <option value="1984">1984</option>
        <option value="1983">1983</option>
        <option value="1982">1982</option>
        <option value="1981">1981</option>
        <option value="1980">1980</option>
        <option value="1979">1979</option>
        <option value="1978">1978</option>
        <option value="1977">1977</option>
        <option value="1976">1976</option>
        <option value="1975">1975</option>
        <option value="1974">1974</option>
        <option value="1973">1973</option>
        <option value="1972">1972</option>
        <option value="1971">1971</option>
        <option value="1970">1970</option>
        <option value="1969">1969</option>
        <option value="1968">1968</option>
        <option value="1967">1967</option>
        <option value="1966">1966</option>
        <option value="1965">1965</option>
        <option value="1964">1964</option>
        <option value="1963">1963</option>
        <option value="1962">1962</option>
        <option value="1961">1961</option>
        <option value="1960">1960</option>
        <option value="1959">1959</option>
        <option value="1958">1958</option>
        <option value="1957">1957</option>
        <option value="1956">1956</option>
        <option value="1955">1955</option>
        <option value="1954">1954</option>
        <option value="1953">1953</option>
        <option value="1952">1952</option>
        <option value="1951">1951</option>
        <option value="1950">1950</option>
        <option value="1949">1949</option>
        <option value="1948">1948</option>
        <option value="1947">1947</option>
        <option value="1946">1946</option>
        <option value="1945">1945</option>
        <option value="1944">1944</option>
        <option value="1943">1943</option>
        <option value="1942">1942</option>
      </select>
    </div>
    <span class="tip">年</span>
  </span>
  <span>
    <div class="ui-select">
      <select name="month" class="ui-select">
        <option>${arr[1]}</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
    </div>
    <span class="tip">月</span>
  </span>
  <span>
    <div class="ui-select">
      <select name="day" class="ui-select">
        <option>${arr[2]}</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
    </div>
    <span class="tip">日</span>
  </span>
</div>

          <div class="userexinfo-form-section">
            <p>生活状态：</p>
            <span>
            <c:if test="${users.uLiftState=='单身'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-1" value="单身" class="ui-radio radio-first" Checked>
              <label for="userexinfo-form-merriage-1">单身</label>
            </c:if>
              <c:if test="${users.uLiftState!='单身'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-1" value="单身" class="ui-radio radio-first">
              <label for="userexinfo-form-merriage-1">单身</label>
            </c:if>
            </span>
            <span>
            <c:if test="${users.uLiftState=='热恋中'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-2" value="热恋中" class="ui-radio" Checked>
              <label for="userexinfo-form-merriage-2">热恋中</label>
            </c:if>
              <c:if test="${users.uLiftState!='热恋中'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-2" value="热恋中" class="ui-radio">
              <label for="userexinfo-form-merriage-2">热恋中</label>
            </c:if>
            </span>
            <span>
            <c:if test="${users.uLiftState=='已婚'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-3" value="已婚" class="ui-radio" Checked>
              <label for="userexinfo-form-merriage-3">已婚</label>
            </c:if>
             <c:if test="${users.uLiftState!='已婚'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-3" value="已婚" class="ui-radio" >
              <label for="userexinfo-form-merriage-3">已婚</label>
            </c:if>
            </span>
            <span>
             <c:if test="${users.uLiftState=='为人父母'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-4" value="为人父母" class="ui-radio" Checked>
              <label for="userexinfo-form-merriage-4">为人父母</label>
            </c:if>
              <c:if test="${users.uLiftState!='为人父母'}">
            	<input type="radio" name="marriage" id="userexinfo-form-merriage-4" value="为人父母" class="ui-radio" >
              <label for="userexinfo-form-merriage-4">为人父母</label>
            </c:if>
            </span>
          </div>
          <%
          		User user1 = (User)session.getAttribute("user");
          		String[] uIndustry = user1.getuIndustry().split("-");
          		request.setAttribute("uIndustry", uIndustry);
          %>
          <div class="userexinfo-form-section">
            <p>从事行业：</p>
            <span>
              <div class="ui-select">
                <select id="job" name="job" class="ui-select" onchange="change()">
                  <option>${uIndustry[0]}</option>
                </select>
              </div>
              <div class="ui-select">
                <select id="subjob" name="occupation" class="ui-select">
                   <option>${uIndustry[1]}</option>
                </select>
              </div>
            </span>
          </div>

          <div class="userexinfo-form-section expand-list">
            <p>兴趣：</p>
            
            <div class="interest-list">
            <c:forEach items="${sessionScope.hobbys}" var = "hobby">
            		<span >
	              	 	<input hobbyId = "${hobby.h_id }" type="checkbox" name="interest[]" id="userexinfo-form-interest-1" value="${hobby.h_id }" class="ui-checkbox" >
	               		 <label for="userexinfo-form-interest-1">${hobby.h_name }</label>
	              </span>
            </c:forEach>
            <script>
            	var resultHobbyIds = ${sessionScope.userHobbys}
            	var spans =  $(".interest-list span");
            	var hobbyIds = new Array();
            	for(var i = 0;i<spans.length;i++){
            		hobbyIds[i]=$(spans[i]).find("input").attr("hobbyId")
            	}
            	for(var i = 0;i<hobbyIds.length;i++){
            		for(var j = 0;j<resultHobbyIds.length;j++){
            			if(resultHobbyIds[j] == hobbyIds[i]){
            				$(spans[i]).find("input").attr("checked","checked")
            			}
            		}
            	}
            </script>
            
              <span class="bottom-tips">选择你的兴趣使你获得个性化的电影推荐哦</span>
            </div>
          </div>
          <div class="userexinfo-form-section">
            <p>个性签名：</p>
            <span>
              <input type="text" name="signature" id="userexinfo-form-bio" class="ui-checkbox" placeholder="20个字以内" value="${users.uSignature}">
            </span>
          </div>
          <input id="csrf" type="hidden" name="csrf" value="5f020f4c43a66e794dc8ed8041ea784a6ef2c9130063f6856cc539eef12b4399">
          <input type="submit" class="form-save-btn" value="保存">
        </form>
        <div class="userexinfo-bottom-section clearfix">
          </div>
      </div>

    </div>
  </div>

  <div class="body-mask"></div>

</div>
</div>
	<!-- 底部 -->
	<div class="footer">
    	<div class="content">
      		<div class="moduleBox">
        		<div class="informationBox">
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影城公告</span>
            			</a>
            			<ul>
              				<li>影城公告</li>
            			</ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>会员中心</span>
            			</a>
			            <ul>
			              	<li>加入会员</li>
			              	<li>会员活动</li>
			              	<li>会员优惠</li>
			            </ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影片资讯</span>
            			</a>
			            <ul>
			              	<li>正在热映</li>
			              	<li>即将上映</li>
			            </ul>
          			</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>影城活动</span>
		            	</a>
		            	<ul>
		              		<li>影城活动</li>
		              		<li>电影资讯</li>
		            	</ul>
		          	</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>关于我们</span>
		            	</a>
			            <ul>
			              	<li>影城介绍</li>
			              	<li>影院介绍</li>
			              	<li>联系我们</li>
			            </ul>
		          	</div>
        		</div>
        		<div class="abc">
          			<div class="textFloat">
            			<div class="erwei1">
                        	<span class="spans ">
                               	<img class="img1" src="img/foot_img/wxerweima.png" alt="">
                            </span>
              				<span class="spans spanss">
                            	<a href="">微信在线购票</a>
                            </span>
            			</div>
            			<div class="erwei2">
                            <span class="spans">
                        		<img class="img1" src="img/foot_img/xcx.jpg" alt="">
                            </span>
              				<span class="spans spanss">
                                <a href="">小程序在线购票</a>
                            </span>
            			</div>
          			</div>
        		</div>
        		<div class="right_information">
		          	<ul class="ul1">
		            	<li class="lis1">连锁热线：</li>
		            	<li class="lis2">400-850-3366</li>
		          	</ul>
		          	<ul class="ul1">
		            	<li class="lis3">官方微信：</li>
		            	<li class="lis4">搜索“猫眼电影”</li>
		          	</ul>
        		</div>
		        <div class="top_btn">
                    <span>
                       	<a href="javascript:void(0)" id="top">TOP</a>
                    </span>
		        </div>
      		</div>
	      	<div class="foot_text">
	       		<div class="foot"> 版权所有(C)猫眼电影投资有限公司　　技术支持：3-1-501</div>
      		</div>
    	</div>
  	</div>
</body>
<script>
   var province_city = [
      ["信息技术","互联网","IT","通信","电子","游戏"],
      ["金融保险","投资","股票基金","保险","银行","信托担保"],
      ["商业服务","资讯","贸易","美容保健","家政服务","旅游","餐饮酒店","娱乐休闲","批发零售","汽车"],
      ["建筑地产","房地产","建筑","物业","装修"],
      ["工程制造","机械制造","生物医药","食品","服装","能源","化工"],
      ["交通运输","航空","铁路","航运船舶","公共交通","物流运输"],
      ["文化传媒","媒体出版","设计","广告创意","动漫","公关会展","摄影"],
      ["娱乐体育","影视","运动体育","音乐","模特"],
      ["公共事业","医疗","教育","政府机关","科研","公益机构","农林牧渔"],
      ["学生","学生"],
      ["其他","其他"]
   ]
   var proSelect=document.getElementById("job");
   var citySelect=document.getElementById("subjob");
    for(var i=0;i<province_city.length;i++){
        var option=document.createElement("option")
        option.value=province_city[i][0];
        option.innerText=province_city[i][0];
        proSelect.appendChild(option);
    }
    function change(){
      citySelect.innerHTML="";
      var province=proSelect.value;
      for(var i=0;i<province_city.length;i++){
          if(province==province_city[i][0]){
              for(var j=1;j<province_city[i].length;j++){
                  var option=document.createElement("option");
                  option.value=province_city[i][j];
                   option.innerText=province_city[i][j];
                   citySelect.appendChild(option);
              }
              break;
          }
      }
  }
  </script>
  <script src="js/common.js"></script>
  <c:if test="${sessionScope.msg}">
  	<script>alert("保存成功")</script>
  	<c:remove var="msg" scope="session"/>
  </c:if>
</html>